import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';
import { Icon } from 'antd';
import globalStyles from '../../style/common.less';
const modalRoot = document.getElementById('dialog-root');

class BasicLineChartPanel extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('overview_panel');
    this.state = {
      chartOption: undefined,
      chartHeight: 280,
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.dataList !== this.props.dataList) {
      if (nextProps.dataList) {
        // this.setChartData(nextProps.dataList);
      }
    }
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    const { dataList } = this.props;
    this.setChartData(dataList);
  }
  setChartData() {
    const option = {
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: '15%',
      },
      legend: {
        left:'30%',
        icon: 'rect',
        data: ['南虹桥','西虹桥', '东虹桥','北虹桥'],
      },
      xAxis: {
        type: 'category',
        axisTick: { show: false },
        splitLine:{show:false},
        boundaryGap: false,
        data: ['2016年', '2017年', '2018年'],
      },
      yAxis: {
        type: 'value',
        axisLine: { show: true },
        axisTick: { show: false },
        splitLine:{show:false},
        axisLabel: {
          formatter: '{value}',
        },
        // name: '万亿'
      },
      series: [
        {
          name: '南虹桥',
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(219, 50, 51, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(219, 50, 51, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(219,50,51)'
            }
          },
          data: [17955,20074,21978],
          markPoint: {
            data: [{ type: 'max', name: '最大值' }],
          }
        },
        {
          name: '西虹桥',
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(53, 166, 222, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(53, 166, 222, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(53, 166, 222)'
            }
          },
          data: [3102, 4040, 4561],
          // markPoint: {
          //   data: [{ type: 'max', name: '最大值' }],
          // }

        },
        {
          name: '北虹桥',
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(1, 185, 131, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(1, 185, 131, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(1, 185, 131)'
            }
          },
          data: [3834, 4146, 4522],
        },
        {
          name: '东虹桥',
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 1,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: 'rgba(246, 201, 0, 0.3)',
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(246, 201, 0, 0)',
                  },
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10,
            },
          },
          itemStyle: {
            normal: {
              color: 'rgb(246,201,0)',
            },
          },
          data: [471, 540, 573],
        }
      ],
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, title, dataConfig, parentDataConfig, width, height } = this.props;
    const dtTitle = `法人数历年变化`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color:'#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom:'1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6,fontSize:15}}><div style={{float: 'left',width:5,height:35,marginRight: 10,backgroundColor: 'rgba(63,177,277,1)',}}/>{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
            {/* <Icon
              type="close"
              className={`${globalStyles.cursor_style_pointer}`}
              style={{ fontSize: 18 }}
              onClick={this.props.onClose}
            /> */}
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}
export default BasicLineChartPanel;
